<script setup>
import { logout, decodedAccessToken } from "@/net/index.js";
import router from "@/router/index.js";

// 用户登出逻辑
function userLogout() {
  logout(() => {
    router.push("/"); // 登出后跳转到主页
  });
}

// 跳转到主页逻辑
function goToHome() {

  const decodedToken = decodedAccessToken();  // 缓存解码后的 token，避免多次调用

  if (decodedToken?.id) {
    // 如果存在 userId，则跳转到主页并附带查询参数
    router.push({ name: 'index-home', query: { id: decodedToken.id }});
  } else {
    console.warn("User ID 不存在"); // 提示用户 ID 不存在
  }
}
</script>



<template>
  <div>
    <!-- 头部导航 -->
    <div class="centered-content">
      <div @click="router.push('/')" class="forum-title">
        Moonlit Alley
      </div>
      <nav class="nav-bar">
        <!-- 鼠标悬停在头像上时有响应反馈 -->
        <img
            @click="goToHome"
            loading="lazy"
            src="../../../public/img/noavatar_small.gif"
            alt="用户头像"
            class="user-avatar"
        />

        <!-- 导航链接 -->
        <a href="#forums" class="nav-link">邮件</a>
        <a href="#community" class="nav-link">搜索</a>
        <button @click="userLogout" class="logout-button">登出</button>
      </nav>
    </div>

    <!-- 路由显示内容 -->
    <router-view></router-view>
  </div>
</template>




<style scoped>
.centered-content {
  background-color: #7b947b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 80px;
}

.forum-title {
  font-size: 40px;
  color: #f4f4f4;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}

.forum-title:hover {
  transform: scale(1.1);
  color: #ccc9a7;
}

.forum-title:active {
  transform: scale(0.95);
}

.nav-bar {
  display: flex;
  gap: 20px;
}

/* 头像样式 */
.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* 设置为圆形 */
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.user-avatar:hover {
  transform: scale(1.1); /* 悬停时放大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.nav-link {
  color: #f4f4f4;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

.nav-link:hover {
  color: #ccc9a7;
  transform: translateY(-2px);
}

.logout-button {
  background-color: #d85e4d;
  border: none;
  padding: 8px 16px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  border-radius: 5px;
}

.logout-button:hover {
  background-color: #b64533;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.logout-button:active {
  background-color: #d85e4d;
}
</style>



